<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 400px;
            height: 100%;
            position: fixed;
            background-color: rgb(252, 223, 223);
            display: flex;
             border-radius: 50px;
            justify-content: space-between;
        }

        .header-top {
            height: 60px;
            width: 400px;
            background-color: pink;
            display: flex;
             border-radius: 5px;
            justify-content: space-between;
        }

        .header-top img {
            margin-left: 5px;
            border-radius: 50%;
        }

        .base {
            width: 400px;
            display: flex;
            background-color: rgb(177, 112, 124);
            position: absolute;
            bottom: 0;
            justify-content: space-around;
            align-items: center;
            border-radius: 5px;

        }

        .base img {
            width: 40px;
        }

        .right-img {
            font-size: 40px;
            margin-right: 20px;
        }
        .body{
            width: 400px;
            background-color: rgb(252, 223, 223);
            position: absolute;
            top: 60px;
            bottom: 50px;
        }
        .person-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .input{
            width: 380px;
            height: 50px;
            border-radius: 15px;
            margin-left: 5px;
            outline: none;
            margin-top: 3px;
            font-size: 20px;
            padding-left:10px;
        }
        .body-ipt{
            width: 400px;
            height: 60px;
            outline: none;
            font-size: 20px;
            border: none;
            margin-top: 1px;
            padding-left:20px;
        }
        h1{
            margin:120px 0px 0px 120px;
        }
        .person-p {
            align-items: center;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        let Home = {
            template: `
                <div class="header">
                        <div class="header-top">
                            <img src="./头像.jpg" alt="">
                            <div>
                                <slot name="center"></slot>
                            </div>
                            <div class="right-img">
                                <slot name="right">+</slot>
                            </div>
                        </div>
                        <div class="body">
                            <input type="test" class="input" placeholder="搜索🔍">
                            <h1>暂无消息</h1>
                        </div>
                </div>
            `}
        let person = {
            template: `
            <div class="person">
                <home :style="{textAlign:'center'}">
                    <p slot="center" class="person-p">联系人</p>
                    <img slot="right" src="./添加好友.svg" alt="" 
                    class="person-img"></img>
                </home>
                <div class="body"><h1>暂无好友</h1></div>
            </div>
            `, components: { Home },
        }
        let dynamic = {
            template: `
            <div class="dynamic">
                <home>
                    <p slot="center" class="person-p">动态</p>
                    <img slot="right" src="./排序-左右.svg" alt="" 
                    class="person-img">图标2</img>
                </home>
                <div class="body">
                    <input type="test" class="input" placeholder="好友动态  无...">
                    <input type="test" class="body-ipt" placeholder="游戏">
                    <input type="test" class="body-ipt" placeholder="音乐">
                    <input type="test" class="body-ipt" placeholder="购物">
                </div>
            </div>
            `, components: { Home },
        }
        let App = {
            template: `
                <div >
                    <component :is="active"></component>
                    <div class="base">
                        <div @click="changeNav('Home')">
                            <img src="./消息.svg" alt="">
                            <p>消息</p>
                        </div>
                        <div @click="changeNav('person')">
                            <img src="./联系人.svg" alt="">
                            <p>联系人</p>
                        </div>
                        <div @click="changeNav('dynamic')">
                            <img src="./动态.svg" alt="">
                            <p>动态</p>
                        </div>
                    </div>
            `,
            data() {
                return {
                    
                    active: 'home'
                }
            },
            methods: {
                changeNav(name) {
                    this.active = name
                }
            },
            components: { Home, person, dynamic },
        }
        new Vue({
            render: h => h(App)
        }).$mount("#app")
    </script>
</body>

</html>